//---------------------------------------------------------------------
// icanvas.js - Animation module for iPhone and iPod touch
//   by Satoshi Nakajima (copyright 2007)
//   version 0.12 (Nov. 15th, 2007)
//
// [Usage]
// 1. Free to use for either commercial or non-commercial
// 2. Feedback is welcome
//   http://satoshi.blogs.com
// 3. I recommand to use this file as-is. If you stil want to modify, please
//   Keep this section as-is
//   Change the name by appending your identity (e.g., "icanvas010Joe.js")
//   Clearly indicate that it's modified from the original version.
//---------------------------------------------------------------------
var iCanvas = function(canvas) {
    if (canvas) {
      canvas.setAttribute('width', canvas.offsetWidth);
      canvas.setAttribute('height', canvas.offsetHeight);
    } else {
      canvas = document.createElement('canvas');
      canvas.setAttribute('width', window.innerWidth);
      canvas.setAttribute('height', window.innerHeight);
      document.body.appendChild(canvas);
    }
    this.width = canvas.width;
    this.height = canvas.height;
    this.ctx = canvas.getContext('2d');
    this.items = new Array();
    this.timer = 0;
    var self = this;
    this.redrawSelf = function() { self._redraw(); };
    this.updateSelf = function(id,o,n) { self.update(); return n; };
};

iCanvas.Item = function(id, x, y, w, h, c) {
    this.id = id;
    this.style = new iCanvas.Item.Style(x, y, w, h, c);
};

iCanvas.Item.drawRect = function(ctx, item) {
    ctx.fillRect(0,0,item.style.width,item.style.height);
};

iCanvas.Item.drawOval = function(ctx, item) {
    var style = item.style;
    var width = style.width;
    var height = style.height;
    var w2 = width/2;
    var h2 = height/2;
    var kx = 0.552 * w2;
    var ky = 0.552 * h2;
    ctx.beginPath();
    ctx.moveTo(w2, 0);
    ctx.bezierCurveTo(w2+kx,0,      width,h2-ky,  width,h2);
    ctx.bezierCurveTo(width,h2+ky,  w2+kx,height, w2,height);
    ctx.bezierCurveTo(w2-kx,height, 0,h2+ky,      0,h2);
    ctx.bezierCurveTo(0,h2-ky,      w2-kx,0,      w2, 0);
    ctx.closePath();
    ctx.fill();
};

iCanvas.Item.prototype = {
    draw: iCanvas.Item.drawRect,
    dummy: 0 // so that I won't leave a trailing comma
};

iCanvas.Item.Style = function(x,y,w,h,c) {
    if (x) this.left = x;
    if (y) this.top = y;
    if (w) this.width = w;
    if (h) this.height = h;
    if (c) this.color = c;
};

iCanvas.Item.Style.prototype = {
    left: 0,
    top: 0,
    color: 'black',
    width: 1,
    height: 1,
    visibility: 'visible',
    dummy: 0 // so that I won't leave trailing comma
};

iCanvas.prototype.add = function(item) {
    this.items[item.id] = item;
    var style = item.style;
// QUESTION: It seems that Safari does not support watch
//    style.watch('left', this.updateSelf);
//    style.watch('top', this.updateSelf);
//    style.watch('color', this.updateSelf);
//    style.watch('width', this.updateSelf);
//    style.watch('height', this.updateSelf);
//    style.watch('visibility', this.updateSelf);
    item.update = this.updateSelf;
    this.update();
}

iCanvas.prototype.getElementById = function(id) {
    return this.items[id];
};

iCanvas.prototype.update = function() {
    if (this.timer == 0) {
        this.timer = setTimeout(this.redrawSelf, 10);
    }
}

iCanvas.prototype._redraw = function()
{
    var ctx = this.ctx;
    ctx.clearRect(0, 0, this.width, this.height);
    //for each (item in this.items) {
    for (var key in this.items) {
        var item = this.items[key];
        var style = item.style;

        if (style.visibility == 'visible') {
            ctx.save();
            ctx.translate(style.left, style.top);
            ctx.fillStyle = style.color;
            item.draw(ctx, item);
            ctx.restore();
        }
    }
    this.timer = 0;
};


